import {  Button } from "antd-mobile";
import React, { Component } from "react";
import Header from "../../components/Header/Header";
import { connect } from "react-redux";
import { getUser, actions } from "../../store/modules/register";
import { bindActionCreators } from "redux";

class Register extends Component {
  render() {
    let {
      user,
      r: { changeUser, doRegister },
      history:{push}
    } = this.props;
    return (
      <div>
        <Header back title="注册" {...this.props}></Header>
        <div>{JSON.stringify(user)}</div>
        <div>
          手机号{" "}
          <input
            type="text"
            placeholder="请输入手机号"
            value={user.phone}
            onChange={(e) => {
              changeUser("phone", e.target.value);
            }}
          />
        </div>
        <div>
          账号{" "}
          <input
            type="text"
            placeholder="请输入账号"
            value={user.nickname}
            onChange={(e) => {
              changeUser("nickname", e.target.value);
            }}
          />
        </div>
        <div>
          密码{" "}
          <input
            type="text"
            placeholder="请输入密码"
            value={user.passwrod}
            onChange={(e) => {
              changeUser("password", e.target.value);
            }}
          />
        </div>
        <Button onClick={() =>doRegister(push)}>注册</Button>
      </div>
    );
  }
}
const mapStateToprops = (state) => {
  return {
    user: getUser(state),
  };
};
const mapDispatchToprops = (dispatch) => {
  return {
    r: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToprops, mapDispatchToprops)(Register);
